<template>
  <view>
    <view class="goods_item" @click="navigatordel(item)">
      <!-- 右侧图片区域 -->
      <view class="goods_image_left">
        <radio 
          :checked='item.goods_state' 
          v-if="showRadio"  
          color="#C00000"
          @click="switchRadio(item)"></radio>
        <image class="goods_images" :src="item.goods_small_logo || defaultPic" ></image>
      </view>
      <!-- 左侧内容区域 -->
      <view class="goods_title_right">
        <!-- 标题 -->
        <view class="goods_title">{{item.goods_name}}</view>
        <!-- 价格 -->
        <view class="goods_price-box">
            <view class="goods_price" >￥{{tofixed(item.goods_price)}}</view>
            <uni-number-box 
            :min="1"
              v-if="showRadio" 
              :value='item.goods_count'
              @change="countChang"></uni-number-box>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"my_goods",
    props: {
      item: {
        type:Object,
        default:{}
      },
      showRadio:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/p        ics/movie/celebrity-default-medium.png'
      };
    },
    methods: {
      // 把数字处理为带两位小数点的数字
      tofixed(num) {
        return Number(num).toFixed(2)
      },
      navigatordel(item) {
       if(!this.showRadio) {
         uni.navigateTo({
           url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
         })
       }
      },
      // 修改单选框状态
      switchRadio(item) {
        this.$emit("radio-chang",{
          goods_id:item.goods_id,
          goods_state:!item.goods_state
        })
      },
      countChang(value) {
        this.$emit("goods-count",{
          id: this.item.goods_id,
          // +的作用：保证数量一直是数字
          count:+value
        })
      }
    }
  }
</script>

<style lang="scss">
  .goods_item{
    padding:10px 5px;
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    
    .goods_image_left {
      margin-right: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between; 
      
      .goods_images{
        width: 100px;
        height: 100px;
        display: block;
      }
    }
    .goods_title_right {
      display: flex;
      flex: 1;
      flex-direction:column;
      justify-content:space-between;
      
      .goods_title {
        font-size: 13px;
      }
      .goods_price-box {
        display: flex;
        justify-content: space-between;
        padding-right: 8px;
        .goods_price {
          color: #ff0000;
          font-weight: bold;
        }
      }
      
    }
  }
</style>